<script setup lang="ts">
import { computed, CSSProperties, ref } from "vue";
import icons from "@/config/icons";

import CloseIcon from "~icons/ep/circle-close";

defineOptions({
  name: "IconSelect"
});

type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;

const emits = defineEmits(["change"]);

const inputValue = defineModel({ type: String });

const popoverRef = ref();
const isPopoverActive = ref(false);

const isOfflineIcon = computed(() => {
  if (inputValue.value) {
    for (const key in icons) {
      if (key === inputValue.value) {
        return true;
      }
    }
    return false;
  }
  return true;
});

const iconItemStyle = computed((): ParameterCSSProperties => {
  return item => {
    if (inputValue.value === item) {
      return {
        borderColor: "var(--el-color-primary)",
        color: "var(--el-color-primary)"
      };
    }
  };
});

const getIconName = (value: string) => {
  return value.includes("/") ? value.split("/").pop() : value;
};

const onChange = (value: string) => {
  popoverRef.value.hide();
  emits("change", value);
};
</script>

<template>
  <el-popover
    ref="popoverRef"
    :width="332"
    trigger="click"
    placement="bottom"
    @show="isPopoverActive = true"
    @hide="isPopoverActive = false"
  >
    <template #reference>
      <div class="select-display" :class="{ active: isPopoverActive }">
        <div class="select__wrapper">
          <template v-if="!!inputValue">
            <IconifyIconOffline
              v-if="isOfflineIcon"
              :icon="inputValue"
              class="icon-size"
            />
            <IconifyIconOnline v-else :icon="inputValue" class="icon-size" />
            <span class="text-color ml-2">{{ getIconName(inputValue) }}</span>
          </template>
          <div v-else class="placeholder">请选择图标</div>
        </div>
        <div v-if="!!inputValue" class="close">
          <IconifyIconOffline
            class="icon"
            :icon="CloseIcon"
            @click.stop="onChange('')"
          />
        </div>
      </div>
    </template>
    <template #default>
      <el-scrollbar height="220px">
        <ul class="flex flex-wrap px-1! ml-1!">
          <li
            v-for="key in Object.keys(icons)"
            :key="key"
            :title="getIconName(key)"
            class="icon-item p-2 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-[#e5e7eb]"
            :style="iconItemStyle(key)"
            @click="onChange(key)"
          >
            <IconifyIconOffline :icon="key" width="20px" height="20px" />
          </li>
        </ul>
      </el-scrollbar>
    </template>
  </el-popover>
</template>

<style lang="scss" scoped>
.placeholder {
  color: var(--el-text-color-placeholder);
}

.select-display {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 32px;
  vertical-align: middle;

  .select__wrapper {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    padding: 1px 11px;
    cursor: pointer;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
      inset;
    transform: translateZ(0);
    transition: var(--el-transition-box-shadow);
  }

  .close {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    opacity: 0;

    .icon {
      color: #aaa;
      cursor: pointer;
    }
  }

  &:hover {
    .select__wrapper {
      box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
    }

    .close {
      opacity: 1;
    }
  }

  &.active {
    .select__wrapper {
      box-shadow: 0 0 0 1px var(--el-color-primary) inset;
    }

    .close {
      opacity: 1;
    }
  }
}

.icon-item {
  &:hover {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
    transform: scaleX(1.05);
    transition: all 0.4s;
  }
}

.text-color {
  color: var(--pure-theme-menu-text);
}
</style>
